<template>
  <div class="about">
    <my-header>许愿墙</my-header>
    <my-input v-model="dream" class="dream"></my-input>
    <my-dream-type @getimg="getImg" :num="num"></my-dream-type>
    <button class="btn" :disabled="disabled" @click="addDream">{{text}}</button>
    <div class="dream-box">
      <ul>
        <li v-for="(item, i) in dreamList" :key="item.id" :style="{
          backgroundImage: 'url(' + item.backimg + ')',
          left: item.left,
          top: item.top
        }" @click="edit(item)" @touchstart="touchStart($event, i)" @touchmove="touchMove($event, i)" @touchend="touchEnd">
          {{item.content}}
          <span @click.stop="del(i)">X</span>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import myHeader from '@/components/header/myHeader'
import myInput from '@/components/input/myInput'
import myDreamType from '@/components/dreamType/myDreamType'
export default {
  components: {
    myHeader,
    myInput,
    myDreamType
  },
  data() {
    return {
      dream: '',
      text: "再想想",
      disabled: true,
      img: '',
      dreamList: [],
      startX: 0,
      startY: 0,
      isEdit: false,
      choseDream: {},
      num: -1
    }
  },
  created() {
    this.dreamList = JSON.parse(localStorage.getItem('dreams')) || []
  },
  methods: {
    checkClick() {
      if(this.dream && this.img) {
        this.disabled = false
        this.text = "许愿"
      } else {
        this.disabled = true
        this.text = "再想想"
      }
    },
    getImg(img) {
      this.img = img
      if(this.isEdit) {
        this.text = "修改"
        this.disabled = false
      } else {
        this.checkClick()
      }
      
    },

    addDream() {
      if(this.isEdit) {
        this.choseDream.content = this.dream
        this.choseDream.backimg = this.img
        this.isEdit = false
      } else {
         const obj = {
            backimg: this.img,
            content: this.dream,
            left: Math.floor(Math.random()*295) + 'px',
            top: Math.floor(Math.random()*300) + 'px',
            id: new Date().getTime()
          }
          if(this.dreamList.length < 6) {
            this.dreamList.push(obj)
          } else {
            this.$loading.show('愿望已达上限')
            setTimeout(() => {
              this.$loading.hide()
            }, 1000);
          }
      }
      this.num = this.num === -1 ? -2 : -1
      // console.log(this.dreamList[i].)
      this.dream = ''
      localStorage.setItem('dreams', JSON.stringify(this.dreamList))
    },

    // 删除愿望
    del(i) {
      this.dreamList.splice(i, 1)
    },
    // 拖拽逻辑
    touchStart(e, i) {
      this.startX = e.touches[0].pageX - parseFloat(this.dreamList[i].left)
      this.startY = e.touches[0].pageY - parseFloat(this.dreamList[i].top)
    },

    touchMove(e, i) {
      this.dreamList[i].left = e.touches[0].pageX - this.startX + 'px'
      this.dreamList[i].top = e.touches[0].pageY - this.startY + 'px'
    },

    touchEnd() {
      localStorage.setItem('dreams', JSON.stringify(this.dreamList))
    },

    // 编辑愿望
    edit(item) {
      this.dream = item.content
      this.img = item.backimg
      this.isEdit = true
      this.choseDream = item
    }

  },

  watch: {
    dream(to) {
      if(this.isEdit) {
        this.text = "修改"
        this.disabled = false
      } else {
        this.checkClick()
      }
    }
  }
}
</script>
<style lang="scss" scoped>
    .about{
      text-align: center;
    }
    .dream{
      margin: 20px 0;
    }
    .btn{
      margin-top: 20px;
      background-color: green;
      color: #fff;
      border: none;
      padding: 6px 15px;
      border-radius: 4px;
    }

    .btn[disabled] {
      background-color: #ccc;
      color: #eee;
    }

    .dream-box{
      position: relative;
      ul{
        list-style: none;
        margin: 0;
        padding: 0;
      }
      li{
        position: absolute;
        width: 80px;
        height: 80px;
        line-height: 80px;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        color: #fff;
        span {
          position: absolute;
          width: 20px;
          height: 20px;
          right: 0;
          top: 0;
          text-align: center;
          line-height: 20px;
          background-color: #ccc;
          color: #333;
        }
      }
    }
</style>
